<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link rel="stylesheet" href="__INDEX__/css/amazeui.min.css">
    <link rel="stylesheet" href="__INDEX__/css/wap.css">
    <title>活动内容页</title>
</head>
<body style="background:#ececec">
<div class="pet_mian">
    <div class="pet_head">
        <header data-am-widget="header"
                class="am-header am-header-default pet_head_block">
            <div class="am-header-left am-header-nav ">
                <a href="{:url('/homeIndex')}" class="iconfont pet_head_jt_ico">&#xe601;</a>
            </div>
            <div class="am-header-right am-header-nav">
                <a href="javascript:;" class="iconfont pet_head_gd_ico"></a>
            </div>
        </header>
    </div>

    <div class="pet_more_list">

        <div class="pet_more_list_block">
            <div class="iconfont pet_more_close">×</div>

            <div class="am-list-news-bd">
                <ul class="am-list">
                    <!--缩略图在标题右边-->
                    <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right pet_hd_list">
                        <a href="{:url('/messages')}" class="pet_hd_block">
                            <div class="pet_hd_block_title">您有新回执啦~</div>
                            <div class="pet_hd_block_tag">
                                <span class="hd_tag_jh">查看列表</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>

        </div>

    </div>

    <div class="pet_content">
        <div class="pet_content_block pet_hd_con">
            <article data-am-widget="paragraph"
                     style="text-align: center"
                     class="am-paragraph am-paragraph-default pet_content_article"
                     data-am-paragraph="{ tableScrollable: true, pureview: true }">

                <h1 style="text-align: left" class="pet_article_title">询价</h1><br>

                <form action="{:url('/homeInquiry')}" method="post">

                    <!--期权代码输入框-->
                    <div class="am-input-group am-input-group-secondary">
                        <span class="am-input-group-label">
                            <i class="am-icon-credit-card am-icon-fw"></i>
                        </span>
                        <input id="inquiryInput" type="text" class="am-form-field" placeholder="期权代码">
                        <input type="hidden" id="reper_id" name="reper_id">
                    </div>
                    <table id="repertoriesTable" class="am-table am-table-bordered am-table-radius"></table>
                    <br>

                    <!--名义本金-->
                    <div class="am-input-group am-input-group-success">
                        <span class="am-input-group-label">
                            <i class="am-icon-money am-icon-fw"></i>
                        </span>
                        <input id="capital_money" name="capital_money" type="text" class="am-form-field" placeholder="名义本金">
                        <span class="am-input-group-label">.00元</span>
                    </div>

                    <!--请选择询价时间-->
                    <h3 id="wen-jian-xuan-ze-yu">请选择询价时间
                        <a href="#wen-jian-xuan-ze-yu" title="Heading anchor" class="doc-anchor"></a>
                    </h3>
                    <label class="am-checkbox-inline"><input type="checkbox" name="oneMonth"> 一个月</label>
                    <label class="am-checkbox-inline"><input type="checkbox" name="twoMonth"> 两个月</label>
                    <label class="am-checkbox-inline"><input type="checkbox" name="threeMonth"> 三个月</label>
                    <br><br>

                    <!--询价-->
                    <button type="submit" class="am-btn am-btn-primary">询价</button>

                </form>

            </article>

            <div class="pet_article_dowload">
                <div class="pet_article_dowload_title">关于期权</div>
                <div class="pet_article_dowload_content">
                    <div class="pet_article_dowload_triangle"></div>
                    <div class="pet_article_dowload_ico"><img src="__INDEX__/img/footdon.png" alt=""></div>
                    <div class="pet_article_dowload_content_font">
                        期权是指一种合约，该合约赋予持有人在某一特定日期或该日之前的任何时间以固定价格购进或售出一种资产的权利
                    </div>
                    <div class="pet_article_dowload_all">
                        <a href="###" class="pet_article_dowload_Az am-icon-apple"> App store</a>
                        <a href="###" class="pet_article_dowload_Pg am-icon-android"> Android</a>
                    </div>
                </div>
            </div>
        </div>


        <div class="pet_article_footer_info">Copyright(c)2015 Amaze UI All Rights Reserved</div>
    </div>

</div>
<script src="__INDEX__/js/jquery.min.js"></script>
<script src="__INDEX__/js/amazeui.min.js"></script>
<script>
    $(function () {

        // 动态计算新闻列表文字样式
        auto_resize();
        $(window).resize(function () {
            auto_resize();
        });
        $('.am-list-thumb img').load(function () {
            auto_resize();
        });
        $('.pet_article_like li:last-child').css('border', 'none');

        function auto_resize() {
            $('.pet_list_one_nr').height($('.pet_list_one_img').height());
            // alert($('.pet_list_one_nr').height());
        }

        $('.pet_article_user').on('click', function () {
            if ($('.pet_article_user_info_tab').hasClass('pet_article_user_info_tab_show')) {
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_show').addClass('pet_article_user_info_tab_cloes');
            } else {
                $('.pet_article_user_info_tab').removeClass('pet_article_user_info_tab_cloes').addClass('pet_article_user_info_tab_show');
            }
        });

        $('.pet_head_gd_ico').on('click', function () {
            $('.pet_more_list').addClass('pet_more_list_show');
        });
        $('.pet_more_close').on('click', function () {
            $('.pet_more_list').removeClass('pet_more_list_show');
        });
    });

</script>

<script>

    $(function () {

        // 仓的table
        var repertoriesTable = $('table#repertoriesTable');

        // 询价的input
        var inquiryInput = $('input#inquiryInput');

        // ajax根据对应code查询仓
        $('input#inquiryInput').on('input', function () {

            // 仓的代码
            var code = $(this).val();

            // 清空询价框,删除仓列表
            if ($('input#inquiryInput').val().length == 0) {
                repertoriesTable.empty();
            }

            // 查仓的ajax
            $.ajax({
                url: '{:url("homeInquiry/' + code + '/edit")}',
                type: 'get',
                dataType: 'json',
                success: function (repertoriesData) {

                    if (repertoriesData.length == 0) { // 没有此仓,删除仓列表
                        repertoriesTable.html('<tr><td colspan="2">查无此仓</td></tr>');
                    } else { // 查询到仓

                        // 拼接要显示的仓的table
                        var repertoriesStr = '<tr><th style="text-align: center">期权代码</th><th style="text-align: center">期权名称</th></tr>';
                        for (var i = 0; i < repertoriesData.length; i++) {
                            repertoriesStr +=
                                '<tr ' +
                                'class="am-primary reperTR" reper-data="' + repertoriesData[i]["id"] + '">' +
                                '<td>' + repertoriesData[i]["code"] + '</td>' +
                                '<td>' + repertoriesData[i]["name"] + '</td>' +
                                '</tr>';
                        }
                        repertoriesTable.html(repertoriesStr);

                        // 点击每个显示的仓的tr
                        $.each($('.reperTR'), function () {
                            $(this).on('click', function () {
                                // 询价的input补充信息
                                var allText = $(this).text();
                                allText = allText.replace(/(\d+)/g, '$1  ');
                                inquiryInput.val(allText);
                                $('input#reper_id').val($(this).attr('reper-data'));

                                // 隐藏仓table
                                repertoriesTable.empty();
                            });
                        });

                    }


                }

            });

        });

        // 三位数字中间加一个逗号
        $('input#capital_money').on('input', function () {
            this.value = this.value.replace(/\D/g, '').replace(/(\d{3})(?=\d)/g, '$1,');
        });



    });

</script>

</body>
</html>